<!-- 用户信息主页面 -->
<template>
  <transition mode="out-in" enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutRight">
    <div id="userPage">
      <!-- 头部菜单栏 -->
      <HomeHead :selectBtn="selectBtn"></HomeHead>
      <!-- 内容区域 -->
      <div class="content_box_out">
        <div class="content_box">
          <!--用户信息头部--->
          <div class="head-box">
            <div class="head-background"></div>
            <div class="head-under">
              <div class="head-under-main">
                <div class="head-img-box" @click="dialogFormVisible = true">
                  <div class="head-img">
                    <img :src="require('C:\\project_picture/'+UserList.userMessages.img)"  width="160px" height="160px"/>
                    <el-dialog title="上传头像" :visible.sync="dialogFormVisible" append-to-body>
                      <div>
                        <el-upload
                          :multiple="multiple"
                          action="auto"
                          list-type="picture-card"
                          :auto-upload="false"
                          :http-request="uploadFile"
                          ref="upload"
                        >
                          <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-button @click="subPicForm">提交上传</el-button>
                      </div>
                    </el-dialog>
                  </div>
                </div>
                <div class="head-usercontent-box">
                  <div class="user-name">
                    <h3>{{UserList.userMessages.nickName}}</h3>
                  </div>
                  <div class="user-profession">
                    职业：{{UserList.userMessages.profession}}
                  </div>
                  <div class="user-data">
                    <div class="data-sex">性别：{{UserList.userMessages.sex}}</div>
                    <router-link to="/user/edit">
                      <div class="edit-data">
                        <span>编辑个人资料</span>
                      </div></router-link>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!--用户信息左部--->
          <div class="left-box">
            <router-view></router-view>
          </div>
          <!---用户信息右部-->
          <div class="right-box">
            <div class="right-follow">
              <router-link to="/user/following" class="head">
                <div class="follow-card-left">
                  <div class="follow-font">关注了</div>
                  <strong>{{FollowList.length}}</strong>
                </div>
              </router-link>
              <router-link to="/user/followed" class="head">
                <div class="follow-card-right">
                  <div class="follow-font">关注者</div>
                  <strong>{{FollowedList.length }}</strong>
                </div>
              </router-link>
            </div>
            <div class="right-list">
              <router-link to="/user/topic"><div class="list-item">
                <span class="list-item-name">关注的话题</span>
                <span class="list-item-value">{{list.followTopticNum}}</span>
              </div></router-link>
              <div class="list-item">
                <span class="list-item-name">关注的专栏</span>
                <span class="list-item-value">{{list.followSpecialNum}}</span>
              </div>
              <router-link to="/user/problem">
                <div class="list-item">
                  <span class="list-item-name">关注的问题</span>
                  <span class="list-item-value">{{list.followProblemNum}}</span>
                </div></router-link>
              <div class="list-item">
                <span class="list-item-name">关注的收藏夹</span>
                <span class="list-item-value">{{list.followCollectNum}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
  import HomeHead from '../components/HomeHead'
  export default {
    name: 'userPage',
    el: '#userPage',
    components: {
      'HomeHead': HomeHead
    },
    data () {
      return {
        showAll: false,
        selectBtn: 4,
        list: {
          'followNum': 100,
          'followedNum': 35,
          'followTopticNum': 0,
          'followSpecialNum': 1,
          'followProblemNum': 5,
          'followCollectNum': 4,
          'username': '王小二',
          'userprofession': '计算机软件'
        },
        sex: '男',
        dialogTableVisible: false,
        dialogFormVisible: false,
        formLabelWidth: '120px',
        multiple: true,
        formDate: '',
        UserList: [],
        FollowList: [],
        FollowedList: [],
        imgName: ''
      }
    },
    computed: {
    },
    methods: {
      uploadFile (file) {
        this.formDate.append('file', file.file)
        // this.imgName = file.file.name
        this.formDate.append('img', file.file.name)
      },
      subPicForm () {
        this.formDate = new FormData()
        this.$refs.upload.submit()
        this.formDate.append('phone', sessionStorage.getItem('phone'))
        let config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }
        this.axios.post('/api/upload', this.formDate, config)
          .then(res => {
            this.dialogFormVisible = false
            this.getNewDatas()
            console.log(res)
          }).catch(res => {
            console.log(res)
          })
      },
      getNewDatas () {
        this.axios.get('/api/findUserMessage', {
          params: {
            phone: sessionStorage.getItem('phone')
          }
        })
          .then(res => {
            this.UserList = res.data.data
            console.log(res)
          })
        this.axios.get('/api/befindFollow', {
          params: {
            phone: sessionStorage.getItem('phone')
          }
        })
          .then(res => {
            this.FollowedList = res.data.data
            console.log(res)
          })

        this.axios.get('/api/findFollow', {
          params: {
            phone: sessionStorage.getItem('phone')
          }
        })
          .then(res => {
            this.FollowList = res.data.data
            console.log(res)
          })
      }
    },
    created () {
      this.getNewDatas()
    }
  }
</script>

<style scoped>

  @import '../../../../static/css/user/UserPage.css';
</style>
